import React ,{useEffect}from 'react'
import Logo from '../assets/images/index/logo.png';
import User from '../assets/images/index/user.png';
import { useNavigate } from 'react-router-dom';
import Delbtn from '../assets/images/test/del-btn.png';
import collectionApi from '../apis/collection'

export default function startTest() {
  const navigate = useNavigate()
  function totest() {
    navigate('/starttest')
  }
  useEffect(() =>{
    getCollectionsCount()
  },[])
  function getCollectionsCount(){
    collectionApi.getCollectionsCount().then(res =>{
      console.log(res);
    })
  }
  return (
    <div>
      <div className='toubu'>
        <img src={Logo} alt="" style={{ marginLeft: 360 }} />
        <div style={{ fontSize: 20, color: '#fff', marginRight: 600 }}>前端第一阶段考试</div>
        <div>
          <img src={User} alt="" />
          <span style={{ marginRight: 382 }} className='toubuwz'>李四</span>
        </div>
      </div>
      <div style={{ display: 'flex', width: 1200, marginTop: 20 }} className='m0'>
        <div className='left1'>
          <div style={{ marginTop: 15, marginLeft: 25 }}>
            <span style={{ fontSize: 18, color: '#333333' }}>答题卡</span>
          </div>
          <div style={{ marginTop: 15, marginLeft: 20 }}>
            <span style={{ fontSize: 12, color: '#333333' }}>单选题</span>
          </div>
          <div style={{ display: 'flex', marginLeft: 20, marginTop: 15 }}>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#ff4b50', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#fff', fontSize: 12 }}>1</span></div>

            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#ff4b50', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#fff', fontSize: 12 }}>2</span></div>

            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#ff4b50', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#fff', fontSize: 12 }}>3</span></div>

            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#ff4b50', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#fff', fontSize: 12 }}>4</span></div>

            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#ff4b50', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#fff', fontSize: 12 }}>5</span></div>

            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#6966eb', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#fff', fontSize: 12 }}>6</span></div>

            </div>
          </div>
          <div style={{ display: 'flex', marginLeft: 20, marginTop: 10 }}>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#ff4b50', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#fff', fontSize: 12 }}>7</span></div>

            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#ff4b50', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#fff', fontSize: 12 }}>8</span></div>

            </div>
          </div>
          <div className='leftcutter'></div>
          <div style={{ marginTop: 15, marginLeft: 20 }}>
            <span style={{ fontSize: 12, color: '#333333' }}>多选题</span>
          </div>
          <div style={{ display: 'flex', marginLeft: 20 ,marginTop:15}}>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#ff4b50', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#fff', fontSize: 12 }}>1</span></div>

            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#ff4b50', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#fff', fontSize: 12 }}>2</span></div>

            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#ff4b50', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#fff', fontSize: 12 }}>3</span></div>

            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#ff4b50', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#fff', fontSize: 12 }}>4</span></div>

            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#ff4b50', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#fff', fontSize: 12 }}>5</span></div>

            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#6966eb', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#fff', fontSize: 12 }}>6</span></div>

            </div>
          </div>
          <div style={{ display: 'flex', marginLeft: 20, marginTop: 10 }}>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#ff4b50', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#fff', fontSize: 12 }}>7</span></div>

            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#ff4b50', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#fff', fontSize: 12 }}>8</span></div>

            </div>
          </div>
          <div className='leftcutter'></div>
          <div className='leftBottom1'>
            <div style={{ width: 10, height: 10, backgroundColor: '#726fff', marginLeft: 100 }}></div>
            <div style={{ fontSize: 12, color: '#666666', marginLeft: 6 }}>正确</div>
            <div style={{ width: 10, height: 10, backgroundColor: '#ff4b50', marginLeft: 6 }}></div>
            <div style={{ fontSize: 12, color: '#666666', marginLeft: 6 }}>错误</div>
          </div>
        </div>
        <div className='centercontent2'>
          <div className='centertop1'>
            <span style={{ fontSize: 20, color: '#333333', marginLeft: 20 }}>单选题（共10题，合计20分）</span>
          </div>
          <div className='questions'>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ fontSize: 16, color: '#333333' }}>1.题目1</div>
              <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                <img src={Delbtn} alt="" style={{ width: 15, height: 15 }} />
              </div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
              <div className='choices'></div>
              <div>A.正面朝向对方</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
              <div className='choices' style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                <div className='choice'></div>
              </div>
              <div>B.正面朝向对方</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
              <div className='choices'></div>
              <div>C.正面朝向对方</div>
            </div>
            <div className='analysis'>
                <div style={{marginTop:10,marginLeft:20,display:'flex',alignItems:'center'}}>
                  <span style={{marginTop:20}}>考生答案：</span><span style={{color:'#ff4b50',marginTop:20}}>B</span>
                </div>
                <div style={{marginTop:10,marginLeft:20,display:'flex',alignItems:'center'}}>
                  <span>正确答案：</span><span>A</span>
                </div>
                <div style={{marginTop:10,marginLeft:20,display:'flex',alignItems:'center'}}>
                  <span>答案解析：答非所问，词不达意</span>
                </div>
            </div>
            <div className='centercutter'></div>
          </div>
          <div className='questions' style={{marginTop:170}}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ fontSize: 16, color: '#333333' }}>2.题目2</div>
              <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                <img src={Delbtn} alt="" style={{ width: 15, height: 15 }} />
              </div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
              <div className='choices'></div>
              <div>A.正面朝向对方</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
              <div className='choices' style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                <div className='choice'></div>
              </div>
              <div>B.正面朝向对方</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
              <div className='choices'></div>
              <div>C.正面朝向对方</div>
            </div>
            <div className='analysis'>
                <div style={{marginTop:10,marginLeft:20,display:'flex',alignItems:'center'}}>
                <span style={{marginTop:20}}>考生答案：</span><span style={{color:'#ff4b50',marginTop:20}}>B</span>
                </div>
                <div style={{marginTop:10,marginLeft:20,display:'flex',alignItems:'center'}}>
                  <span>正确答案：</span><span>A</span>
                </div>
                <div style={{marginTop:10,marginLeft:20,display:'flex',alignItems:'center'}}>
                  <span>答案解析：答非所问，词不达意</span>
                </div>
            </div>
          </div>
          <div className='centertop2'>
            <span style={{ fontSize: 20, color: '#333333', marginLeft: 20 }}>多选题（共10题，合计20分）</span>
          </div>
          <div className='questions'>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ fontSize: 16, color: '#333333' }}>1.题目1</div>
              <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                <img src={Delbtn} alt="" style={{ width: 15, height: 15 }} />
              </div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
              <div className='duoxuan'></div>
              <div>A.正面朝向对方</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
              <div className='duoxuan' style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
              </div>
              <div>B.正面朝向对方</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
              <div className='duoxuan'></div>
              <div>C.正面朝向对方</div>
            </div>
            <div className='analysis'>
                <div style={{marginTop:10,marginLeft:20,display:'flex',alignItems:'center'}}>
                  <span style={{marginTop:20}}>考生答案：</span><span style={{color:'#ff4b50',marginTop:20}}>B</span>
                </div>
                <div style={{marginTop:10,marginLeft:20,display:'flex',alignItems:'center'}}>
                  <span>正确答案：</span><span>AB</span>
                </div>
                <div style={{marginTop:10,marginLeft:20,display:'flex',alignItems:'center'}}>
                  <span>答案解析：答非所问，词不达意</span>
                </div>
            </div>
            <div className='centercutter'></div>
          </div>
          <div className='questions' style={{marginTop:170}}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ fontSize: 16, color: '#333333' }}>2.题目2</div>
              <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                <img src={Delbtn} alt="" style={{ width: 15, height: 15 }} />
              </div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
              <div className='duoxuan'></div>
              <div>A.正面朝向对方</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
              <div className='duoxuan' style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
              </div>
              <div>B.正面朝向对方</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
              <div className='duoxuan'></div>
              <div>C.正面朝向对方</div>
            </div>
            <div className='analysis'>
                <div style={{marginTop:10,marginLeft:20,display:'flex',alignItems:'center'}}>
                  <span style={{marginTop:20}}>考生答案：</span><span style={{color:'#ff4b50',marginTop:20}}>B</span>
                </div>
                <div style={{marginTop:10,marginLeft:20,display:'flex',alignItems:'center'}}>
                  <span>正确答案：</span><span>AC</span>
                </div>
                <div style={{marginTop:10,marginLeft:20,display:'flex',alignItems:'center'}}>
                  <span>答案解析：答非所问，词不达意</span>
                </div>
            </div>
          </div>
        </div>
        <div className='rightbutton' onClick={totest}>
          返回
        </div>
      </div>
      <div className='footer'>
        Copyright © 2021  成都蜗牛创想科技有限公司
      </div>
    </div>
  )
}
